import { FC } from 'react';
import styles from './styles.module.less';

const Article: FC = () => {
  return (
    <section className={styles.p}>
      <div className={styles.container}>
        <div className={styles.row}>
          <div className={styles.left}>
            <div className={styles.leftWrap}>
              <div className={styles.headerTitle}>大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?</div>
              <div className={styles.date_info}>
                作者：<span style={{ color: '#f0437e' }}>网站管理员</span>
                &nbsp;&nbsp;&nbsp;日期：<span style={{ color: '#f0437e' }}>2019-04-01 16:58</span>
              </div>
              <div className={styles.context}>
                设计师必备歌单：
                <br />①
                <br />
                周杰伦《不能说的秘密》
                <br />
                最美的不是下雨天
                <br />
                是曾与你躲过雨的屋檐
                <br />
              </div>
              <div className={styles.paging}>
                <div className={`${styles.pre} ${styles.pagItem}`}>
                  <svg className={styles.pre_svg} viewBox="0 0 23 48">
                    <g>
                      <polyline fill="none" strokeMiterlimit="10" points="21.5,1.3 2.6,23.4 21.5,45.7 "></polyline>
                    </g>
                  </svg>
                  <div className={styles.text}>
                    <span className={styles.action}>上一篇</span>
                    <span className={styles.title}>立足大湾区、链接长三角,京东快递航空战略新版图</span>
                  </div>
                </div>

                <div className={`${styles.next} ${styles.pagItem}`}>
                  <div className={styles.text}>
                    <span className={styles.action}>下一篇</span>
                    <span className={styles.title}>立足大湾区、链接长</span>
                  </div>

                  <svg className={styles.next_svg} viewBox="0 0 23 48">
                    <g>
                      <polyline fill="none" strokeMiterlimit="10" points="1.5,45.7 20.4,23.5 1.5,1.3"></polyline>
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.rightWrap}>
              <div className={styles.input}>
                <input type="text" placeholder="请输入需要搜索的文字" />
              </div>
              <div className={styles.newsTitle}>热门资讯</div>
              <div className={styles.newsList}>
                <ul>
                  <li>
                    <div className={styles.post_title}>大环境影响下的物流业该如何发展?网络货运平台或将带来新机遇?</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>立足大湾区、链接长三角,京东快递航空战略新版图</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>推广新能源车辆走绿色发展</div>
                  </li>
                  <li>
                    <div className={styles.post_title}>电子商务促进快递行业发展</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Article;
